<template>
  <el-dialog
    :title="isAdd"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose">
    <div class="xlSeeFrom">
      <div class="dig-form">
        <el-form :inline="true" class="demo-ruleForm">
            <el-form-item label="Permissions">
              <el-select v-model="level" placeholder="please select">
                <el-option label="Employee" value="0"></el-option>
                <el-option label="Financial Officer" value="1"></el-option>
                <el-option label="Financial Manager" value="2"></el-option>
                <el-option label="HR Specialist" value="3"></el-option>
                <el-option label="HR Manager" value="4"></el-option>
                <el-option label="PM" value="5"></el-option>
                <el-option label="PMO" value="6"></el-option>
                <el-option label="COO" value="7"></el-option>
              </el-select>
            </el-form-item>
        </el-form>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">Close</el-button>
        <el-button  type="primary" @click="sure">Confirm</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {modifyLevel} from '@/request/api'

export default {
  data(){
    return {
      isAdd:'Modify Permissions',
      dialogVisible:false,
      username:'',
      level:''
    }
  },
  methods:{
    handleClose (done) {
      this.dialogVisible = false
    },
    sure(){
      modifyLevel({
        othername:this.username,
        level:this.level
      }).then(res =>{
        var user = sessionStorage.getItem('userName')
        if(this.username == user){
            sessionStorage.removeItem('token')
            sessionStorage.removeItem('level')
            sessionStorage.removeItem('href')
            sessionStorage.removeItem('userName')
            this.$message.success("Success,You need to log in again!")
            this.$router.push('/login')
            // setInterval(() => {
            //   this.$router.push('/login')
            // },2000)

            return
        }
        if(res.code == 200){
          this.$message.success("Success!")
          this.dialogVisible = false
          this.$parent.getAllStaff()
        }
      })
    },
    getUserName(username){
      this.username = username
    }
  }

}
</script>

<style lang="less" scoped>
/deep/ .el-form-item__label {
  background-color: #eee;
  text-align: left;
  padding-left: 10px;
  width: 125px;
}
/deep/ .el-dialog__header {
  padding: 20px 20px 10px;
  border-bottom: 1px solid #eee;
}
/deep/ .el-dialog__body {
  padding: 10px 20px;
  color: #333;
  font-size: 15px;
  word-break: break-all;
}
.textContent{
  padding-left: 10px;
}
.dialog-footer{
  margin-left: 67%;
}

</style>
